<template>
	<view>
		<u-popup ref="uPopup" v-model="popupVisible" mode="center" :mask-close-able="false" border-radius="15"
			:safe-area-inset-bottom="true" :custom-style="customStyle">

			<view class="popup">
				<view class="" v-if="steep == 1">

					<view class="title">发现新版本</view>
					<view class="body-content">
						<view class="body-pre" style="">
							{{appUpdateInfo.app_content}}
						</view>
					</view>
					<view class="footer">
						<view class="btn" v-if="appUpdateInfo.is_force != 1">
							<u-button @click="close">稍后再说</u-button>
						</view>
						<view class="btn">
							<u-button type="primary" @click="update">立即更新</u-button>
						</view>
					</view>
				</view>
				<view class="" v-if="steep == 2">
					<view class="title">升级APP</view>
					<view class="body-content">
						<view>正在为您更新，请耐心等待</view>

						<u-line-progress active-color="#2979ff" :show-percent="true" :striped="true" :percent="percent"></u-line-progress>
					</view>
					<view class="footer">
						<!-- 	<view class="btn">
							<u-button @click="cancelAbort">取消下载</u-button>
						</view> -->
						<view class="btn">
							<u-button type="primary" @click="popupVisible = false">后台下载</u-button>
						</view>
					</view>
				</view>


			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		name: "app-update-popup",
		props: {
			visible: {
				type: Boolean,
				default: true
			},

		},
		computed: {
			...mapGetters(["appUpdateInfo"])
		},
		data() {
			return {
				customStyle: {
					padding: "30px",
					position:"absolute",
					zIndex:10000000000000000
				},
				popupVisible: false,
				percent: 0,
				is_force: 1,
				downloadTask: null,
				steep: 1
			};
		},
		mounted() {
			this.popupVisible = this.visible;
		},
		methods: {
			close() {
				this.popupVisible = false
				this.$refs.uPopup.close()
			},
			update() {
				this.steep = 2
				this.doUpData();
			},
			doUpData() {
				let that = this;
				console.log("that.appUpdateInfo.download_url",that.appUpdateInfo.download_url);
				const downloadTask = uni.downloadFile({ //执行下载
					url: that.appUpdateInfo.download_url, //下载地址
					success: downloadResult => { //下载成功
						console.log("downloadresult",downloadResult);
						uni.hideLoading();
						if (downloadResult.statusCode == 200) {
							plus.runtime.install( //安装
								downloadResult.tempFilePath, {
									force: true
								},
								function(res) {
									utils.showToast('更新成功，重启中');
									plus.runtime.restart();
								}
							);
						}
					},
					fail: (err) => {
						console.log("downloadfile err",err);
					}
				});
				
				that.downloadTask = downloadTask;
				
				console.log("downloadtask",that.downloadTask);

				downloadTask?.onProgressUpdate((res) => {
					console.log("onprogressupdate res",res);
					that.percent = res.progress;
				});
			},
			cancelAbort() {
				if (this.downloadTask) {
					this.downloadTask.abort();
					this.downloadTask = null;
				}

				this.close()
			}

		},
		watch: {
			visible(value) {
				this.popupVisible = value;
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		width: 300px;
		padding: 20px;

		.title {
			font-size: 18px;
			font-weight: bold;
			text-align: center;
		}

		.body-content {
			margin: 15px 0px;
			line-height: 20px;
			text-align: center;

			.body-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				font-size: 15px;
				text-align:left;
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			.btn {
				margin: 0px 10px;
			}
		}
	}
</style>